<template>
    <!-- 车辆进出统计 -->
        <div class="carRpt1Wrapper">

            <div class="chartTitleLayout">
                <SectionTitle text="车辆入校统计" />                
                <SchoolAreaSelect @select="handleSelect" :value="school"/>
            </div>
            <ButtonGroup :buttons="btns"  style="margin-top: 20px;margin-bottom: 10px;" @select="handleSelectDate"/>
            <div :id="id" class="carRpt1"></div>
        </div>

        <van-popup v-model:show="showDetail" closeable position="bottom" :style="{ height: '70%' }" teleport="body" round destroy-on-close>
            <CarGatePopup :date="dateDetail" :school="school" :dateDuration="dateDuration"/>            
        </van-popup>
    
    
</template>
<script lang="ts" setup>
import {type ECOption,initChart} from '@/util/echartsTool'
import { onMounted, onUnmounted } from 'vue';
import { type EChartsType } from 'echarts/core';
import SectionTitle from '@/components/SectionTitle.vue';
import SchoolAreaSelect from '@/components/form/schoolAreaSelect.vue';
import ButtonGroup from '@/components/buttonGroup.vue';
import { formateDateYMD } from '@/util/dateTool';
import http from '@/api/request'
import { ref } from 'vue';
import CarGatePopup from '@/views/dashboard/rptPopup/carGatePopup.vue';
import { saveLog } from '@/api/queryLog';

interface CarRptData1{
    cnt:number,
    date_on:string
}
interface CarRptData{
    rpt1:CarRptData1[]
}

const begin = ref();
const end = ref();
const school = ref('')
const {id} = defineProps(['id'])
const showDetail = ref(false)
const dateDuration = ref(0);
const dateDetail = ref()
const btns = ref(['近1周','近2周','近1月'])
const option: ECOption = {
    grid:{
        top:10,
        bottom:30,
        left:50,
    },
    tooltip: {},
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [
        {
            name: '车辆入校数量',
            type: 'bar',
            data: [],
            tooltip: {
                trigger: 'item',
                triggerOn:'click',
                enterable:true,                
                formatter: function (params:any) {
                    // 返回一个包含 HTML 按钮的字符串
                    return `
                        <div data-param='${params.name}' class='chartsCarShowDetailBtnWrapper'>
                            <div data-param='${params.name}'>${params.name}</div>
                            <div data-param='${params.name}'>入校车辆: ${params.value}辆</div>
                            <div class='chartsCarShowDetailBtn' style='color:blue' data-param='${params.name}'>查看详情</div>
                        </div>
                    `;
                },
                
            } 
        }
    ]
};
var myChart :EChartsType;

onMounted(()=>{
    end.value = formateDateYMD(new Date());
    var d = new Date();
    d.setDate(d.getDate()-7)
    begin.value = formateDateYMD(d);

    init();
    getData();
})

const handleSelect = (selectSchool:string)=>{
    school.value = selectSchool;
    saveLog("车辆入校查询(校区)","rpt_click_car",selectSchool)
    getData();
}

const handleSelectDate = (index:number)=>{
    end.value = formateDateYMD(new Date());
    var d = new Date();
    if(index == 0) d.setDate(d.getDate()-7)
    if(index == 1) d.setDate(d.getDate()-14)
    if(index == 2) d.setDate(d.getDate()-30)
    begin.value = formateDateYMD(d);
 
    dateDuration.value = index;

    saveLog("车辆入校查询(日期)","rpt_click_car",btns.value[index])
    
    getData();
}

const getData = ()=>{
    http.get<CarRptData>('/car/rpt',{
        begin:begin.value,
        end:end.value,
        school:school.value
    }).then((resp)=>{
        
        
        var x:string[] = [];
        var y:number[] = [];
          

        resp.data?.rpt1.forEach((item)=>{
           x.push(item.date_on)
           y.push(item.cnt);
        })

        //@ts-ignore
        option.xAxis.data = x;
        //@ts-ignore
        option.series[0].data = y;

        myChart.setOption(option);
    })
}


onUnmounted(()=>{
    myChart.dispose();
})

const init = ()=>{
    // 基于准备好的dom，初始化echarts实例
    myChart = initChart(document.getElementById(id));
    
    // 绘制图表
    myChart.setOption(option);


    myChart.on('showTip',()=>{
        const tooltips = document.querySelector('.chartsCarShowDetailBtnWrapper');
        if(tooltips){
            tooltips.addEventListener('click',(e)=>{
                const tagrget = e.target as HTMLElement;
                const res = tagrget.getAttribute('data-param');                
                showDetail.value = true;
                dateDetail.value = res+"";
                saveLog("点击车辆入校报表",'rpt_click_item_car',res+"");
            })
        }
    })
}
</script>
<style lang="less" scoped>
  .carRpt1Wrapper{
        background-color: #fff;
        padding:10px;
        margin:10px;
        border-radius: 6px;
        .carRpt1{
            width: 100%;
            height: 300px;
        }
    }

    .chartTitleLayout{
        display: flex;
        justify-content: space-between;
    }

    .total{
        color:blue;
        padding:10px ;
        font-size: 16px;
        text-align: center;
        
    }
</style>